<template>
  <div class="wrapper">
    <swiper :options="swiperOption" >
    <swiper-slide v-for="item in swiperList" :key="item.id">
              <img class="swiper-img" :src="item.imgUrl" />
    </swiper-slide>
    
     <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
    


<script>
export default {
  name:'HomeSwiper',
  data (){
      return{
          swiperOption:{
              pagination:'.swiper-pagination',
              loop:true
          },
          swiperList:[{
              id:'0001',
              imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/d1dabef55b4e17db42b4d74cc0ea23af.jpg_750x200_5a5c28d4.jpg'
            },{
              id:'0002',
              imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/9f581f130d65e97c01301661e1e4116f.jpg_750x200_e5b996c3.jpg'
            
          }]
      }
  }
}
</script>

<style scoped>
 .swiper-img{
     width:100%;
 }
 .wrapper{
     overflow:hidden;
     width:100%;
     height:26vw;   /*让高度始终相对宽度的26% */
     background:#eee;  /*图片未显示之前给它一个灰色背景*/
 }
 .wrapper >>> .swiper-pagination-bullet-active{  /*样式穿透*/
     background:#fff; /*这样写分页小点号就从默认的蓝色变成白色了*/
 }
</style>
